<template>
  <div class="box lgl">
    <!-- <header class="header">
      <span class="iconfont icon-jiantou1 left">返回</span>
      <span class="icon-box">
        <span class="iconfont icon-liebiao"></span>
        <span class="line">|</span>
        <span class="iconfont icon-shezhi"></span>
      </span>
    </header> -->
    <Header>
      <i slot="left"></i>
      首页
    </Header>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- banner -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
          <img :src="item.img" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="methods">
        <div class="first" @click="kindLeft">
          <dl>
            <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cbeeb4989.png" alt=""></dt>
            <dd>
              <h2>店内买单</h2>
              <p>畅享更多优惠</p>
              </dd>
          </dl>
        </div>
        <div class="another" @click="kindRight">
          <dl>
            <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cbeeb4989.png" alt=""></dt>
            <dd>
              <h2>外卖速达</h2>
              <p>上门更方便</p>
              </dd>
          </dl>
        </div>
      </div>
      <div class="news">
        <p>
          <span class="iconfont icon-mendianxinxi gonggao"></span>
            <marquee behavior="scroll" direction="" scrollamount="3">
              第二杯半价哦!!!
            </marquee>
        </p>
      </div>
      <div class="link">
        <ul>
          <li><img src="http://img.zhichiwangluo.com/zcimgdir/thumb/t_15264395715afb9e932aedd.jpg" alt=""></li>
          <li>
            <p>你的专属奶茶店</p>
            <p>深圳市南山区软件基地芒果网大厦</p>
          </li>
          <li><img src="
          http://img.zhichiwangluo.com/zcimgdir/album/file_5afa820166c84.png" alt=""></li>
        </ul>
      </div>
      <div class="kind">
        <ul>
          <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc714a60d.png" alt="">
            <router-link to='/order/0' tag='span'>我要买单</router-link>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efd71531e6.png" alt="">
            <router-link to='/coupon' tag='span'>优惠券</router-link>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6920ce9.png" alt="">
            <span>储存有礼</span>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6d48898.png" alt="">
            <router-link to='/vip' tag='span'>会员卡</router-link>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6bcf8a8.png" alt="">
            <span>优先排队</span>
          </li>
        </ul>
      </div>
      <div class="shopactive">
        <div class="top">
          <dl>
          <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b72a928be307.png" alt=""></dt>
          <dd>
            <h3>店铺活动</h3>
            <p>Shop activities </p>
          </dd>
          </dl>
        </div>
        <div class="bottom">
          <ul>
            <li style="background-image:url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b839f181d478.png)">
              <h3>转出美味</h3>
              <p>邀你一起开心大转盘</p>
              <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d414c95d4ae5.png" alt="">
            </li>
            <li style="background-image:url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b839f0f6fc08.png)">
              <h3>优惠拼团</h3>
              <p>实惠大划算</p>
              <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d414c9310ac9.png" alt="">
            </li>
          </ul>
        </div>
      </div>
      <div class="hotsale">
        <div class="top">
          <dl>
            <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b72a928be307.png" alt=""></dt>
            <dd>
              <h3>今日热销</h3>
              <p>Hot sale today</p>
            </dd>
          </dl>
        </div>
      <!-- 使用组件 -->
      <div v-if="kg">
        <Prolist :prolist="prolist"/>
      </div>
      <div v-else class="wdl">
        登录才能查看数据哦&nbsp;&nbsp;&nbsp;
        <router-link to='/login'>登录</router-link>
      </div>
    </div>
    </van-pull-refresh>
    <div class="gotop" @click="gotop"></div>
  </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Vue from 'vue'
// import utils from '@/utils'
import Prolist from '@/components/Prolist.vue'
import Header from '@/components/header.vue'
import { Swipe, SwipeItem, PullRefresh } from 'vant'

Vue.use(Swipe).use(SwipeItem)
Vue.use(PullRefresh)
export default {
  // 注册组件
  components: {
    Prolist,
    Header
  },
  data () {
    return {
      prolist: [],
      bannerlist: [],
      isLoading: false,
      loading: false,
      finished: false,
      pageCode: 1,
      flag: true,
      kg: false
    }
  },
  methods: {
    onLoad () {
      this.loading = true
      axios.get('/pro?limitNum=10&pageCode=' + this.pageCode).then(res => {
        // console.log(res.data)
        this.loading = false
        this.pageCode++
        if (res.data.data.length === 0) {
          this.finished = true // 表示数据已经加载完毕
        } else {
          this.prolist = [...this.prolist, ...res.data.data]
        }
      })
    },
    gotop () {
      document.getElementById('content').scrollTop = 0
    },
    onRefresh () {
      this.isLoading = true
      this.prolist = []
      axios.get('/pro').then(res => {
        this.isLoading = false
        this.finished = false
        res.data.data.map(item => {
          if (item.hot === 1) {
            this.prolist.push(item)
          }
        })
      })
    },
    kindLeft () {
      if (this.flag) {
        this.$router.push('./login')
      } else {
        this.$router.push('./kindLeft')
      }
    },
    kindRight () {
      if (this.flag) {
        this.$router.push('./login')
      } else {
        this.$router.push('./kindRight')
      }
    }
  },
  created () {
    if (localStorage.token) {
      this.flag = false
      this.kg = true
    }
    if (sessionStorage.kg === 'true') {
      sessionStorage.kg = false
      // console.log(1)
      history.go(0)
    }
    axios.get('/pro').then(res => {
      // console.log(res.data)
      res.data.data.map(item => {
        if (item.hot === 1) {
          this.prolist.push(item)
        }
      })
    })
    axios.get('/banner').then(res => {
      this.bannerlist = res.data.data
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.lgl {
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .wdl {
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    font-size: 20px;
  }
  .left {
    margin-left: 5px;
  }
  .icon-box {
    display: block;
    width: 80px;
    height: 30px;
    border-radius: 20px;
    border:1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right:5px;
    .line {
      color: #aaa;
    }
  }
  * {
    overflow: hidden;
  }
  .van-swipe {
    width: 375px;
    height: 200px;
    margin: 0 auto;
    * {overflow: visible}
    img {
      @include rect(100%,2rem)
    }
  }
  .content{
    .gotop {
      @include rect(0.57rem, 0.6rem);
      border-radius: 50%;
      position: fixed;
      right:0.1rem;
      top: 4.8rem;
      background-image: url('./../../assets/images/rocket_up_02.gif');
      background-size: cover;
    }
    .methods{
       @include flexbox();
       @include justify-content(space-around);
       margin: 10px 10px 10px 10px;
       .first{
          @include rect(1.43rem,0.74rem);
          @include border-radius(0.1rem);
          background: url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cc899d8f0.png);
          dl{
             @include flexbox();
             @include justify-content(space-around);
             @include margin(0.2rem 0 0 0 );
            img{
             @include rect(0.4rem, 0.53rem);
          }
          h2{
            @include font-size(15px);
            @include color(rgb(48, 84, 181));
            @include font-weight(blod);
          }
          p{
            @include font-size(12px);
            @include color(rgb(170, 184, 212));
          }
          }
       }
       .another{
           @include rect(1.43rem,0.74rem);
          @include background-color(#ccc);
          @include border-radius(0.1rem);
          background-image: url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cd0289700.png);
          dl{
             @include flexbox();
             @include justify-content(space-around);
             @include margin(0.2rem 0 0 0 );
            img{
             @include rect(0.4rem, 0.53rem);
          }
          h2{
            @include font-size(15px);
            @include color(rgb(48, 84, 181));
            @include font-weight(blod);
          }
          p{
            @include font-size(12px);
            @include color(rgb(170, 184, 212));
          }
          }
       }
    }
  .news{
    @include rect(100%, 0.3rem);
    @include padding(0 0.2rem);
    p {
      @include flexbox();
      @include align-items();
      .gonggao {
        display: inline-block;
        @include rect(0.3rem, 0.3rem);
        margin-top: -5px;
        text-align: center;
        line-height: 30px;
        color: orange;;
      }
      marquee {
        @include rect(0.85rem,0.3rem);
        @include line-height(0.3rem);
        @include display(inline-block);
      }
    }
  }
  .link{
     @include rect(100%, 0.9rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     ul{
     @include margin(0);
     @include rect(3rem, 0.7rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     @include justify-content(space-around);
    //  @include border(1px solid #ccc);
     @include box-shadow(rgb(228, 230, 239) 0px 0px 7px);
     @include border-radius(0.1rem);
     li{
       &:nth-child(1){
         img{
           @include rect(0.44rem, 0.44rem);
           @include border-radius(50%);
         }
       }
        &:nth-child(2){
        p{
           &:nth-child(1){
             @include font-size(14px);
             @include color(black);
             @include margin(0 0 0.1rem 0.15rem)
           }
           &:nth-child(2){
             @include font-size(12px);
             @include color(#ccc);
             @include margin(0 0.15rem 0)
           }
        }
       }
        &:nth-child(3){
         img{
           @include rect(0.2rem, 0.2rem);
         }
       }
     }
    }
  }
  .kind{
    @include rect(100%, 0.9rem);
    @include margin(0 auto);
    @include flexbox();
    @include align-items();
    ul{
     @include rect(3.2rem, 0.7rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     @include justify-content(space-around);
     li{
       @include rect(100%, 100%);
       @include flexbox();
       @include flex-direction(column);
       @include align-items();
       @include justify-content(space-around);
       img{
         @include rect(0.32rem,0.32rem);
         @include display(block);
       }
       span{
         @include font-size(12px)
       }
     }
    }
  }
  .shopactive{
    .top{
      @include rect(100%,0.6rem);
      @include margin(0 auto);
      @include flexbox();
      @include align-items();
      @include justify-content();
      dl{
        @include flexbox();
        dt{
          img{
            @include rect(0.22rem,0.22rem)
          }
        };
        dd{
          h3{
            @include font-size(14px);
          };
          p{
            @include font-size(11px);
            @include color(#ccc);
          };
        }
      }
    }
    .bottom{
       @include rect(100%, 1.524rem);
      ul{
        @include flexbox();
        @include rect(3.2rem, 1.42rem);
        @include margin(0 auto);
        @include justify-content(space-between);
        li{
          @include rect(1.46rem, 1.42rem);
          @include flexbox();
          @include flex-direction(column);
          @include align-items();
          @include justify-content();
          h3{
          @include font-size(14px);
          }
          p{
          @include font-size(12px);
          @include color(#999);
          }
          img{
          @include rect(0.79rem, 0.86rem);
          }
        }
      }
    }
  }
  .hotsale{
    .top{
      @include rect(100%,0.6rem);
      @include margin(0 auto);
      @include flexbox();
      @include align-items();
      @include justify-content();
      dl{
        @include flexbox();
        dt{
          img{
            @include rect(0.22rem,0.22rem)
          }
        };
        dd{
          h3{
            @include font-size(14px);
          };
          p{
            @include font-size(11px);
            @include color(#ccc);
          };
        }
      }
    }
  }
  }
}
</style>
